<template>
	<view class="page flex flex-col text-white">
		<navbar :title="'登录'" :leftIcon="false"></navbar>
		<view class="flex-center">
			<image @click="addDevice" class="logoIcon"
				src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/yaoqing@2x.png" mode="aspectFill">
			</image>
		</view>
		<view class="w610">
			<view>
				<up-input placeholder="请输入手机账号" type="number" maxlength="11" v-model.trim="login.phone"></up-input>
			</view>
			<view class="tuiCode">
				<up-input placeholder="请输入推广码" maxlength="6" v-model.trim="login.code"></up-input>
			</view>

			<view class="loginBtn flex-center" @click="loginSubmit">登录</view>

		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	import {
		test
	} from 'uview-plus';

	// 登录对象
	const login = reactive({
		phone: "",
		code: ""
	});


	// 登录
	const loginSubmit = () => {
		if (!login.phone) {
			uni.showToast({
				title: "请输入手机号",
				icon: "none"
			})
			return false;
		}

		if (!uni.$u.test.mobile(login.phone)) {
			uni.showToast({
				title: "手机号格式不正确!",
				icon: "none"
			})
			return false;
		}

		if (!login.code) {
			uni.showToast({
				title: "请输入邀请码",
				icon: "none"
			})
			return false;
		}

		uni.reLaunch({
			url: "/pages/index/index"
		})



	}

	const imageUrl = ref();

	// 页面挂在完成
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;
	})
</script>

<style scoped>
	.loginBtn {
		height: 100rpx;
		background: linear-gradient(90deg, #A102FF 0%, #162CFF 100%);
		border-radius: 50rpx;
		font-size: 30rpx;
		color: #04FFFF;
	}

	.tuiCode {
		margin: 30rpx 0 154rpx 0;
	}

	.logoIcon {
		width: 188rpx;
		height: 188rpx;
		margin: 100rpx 0 200rpx 0;
	}

	.page /deep/ .u-border {
		border-color: rgba(22, 179, 255, 0.25) !important;

	}

	.page /deep/ .u-input {
		background-color: #141039;
		height: 60rpx;
	}

	.page /deep/ .uni-input-input {
		color: #fff !important;
	}

	.page /deep/ .uni-input-wrapper {
		font-size: 26rpx;

	}
</style>